<template>
  <section class="padding">
    <el-card>
      <div slot="header" class="clearfix">
        <span class="title-icon">运费查询</span>
      </div>
      <el-form
        ref="freightForm"
        :model="freightForm"
        :rules="rules"
        label-position="left"
        label-width="120px"
        size="mini"
        class="text-sm"
      >
        <el-row>
          <el-col :lg="12" :md="12">
            <!-- 起运地 -->
            <el-form-item prop="channelLoadingPortId">
              <div slot="label">起运地：</div>

              <el-select
                v-model="freightForm.channelLoadingPortId"
                filterable
                placeholder="请选择"
              >
                <el-option
                  v-for="(label, value) in publicData.shippingAddressMap"
                  :key="value"
                  :label="label"
                  :value="value"
                />
              </el-select>
            </el-form-item>
            <!-- 目的地 -->
            <el-form-item prop="countryId">
              <div slot="label">目的国家：</div>

              <el-select
                v-model="freightForm.countryId"
                filterable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in publicData.countryList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <!-- 实重 体积  -->

            <el-form-item prop="weight">
              <div slot="label">实重：</div>

              <el-input v-model="freightForm.weight" clearable />
            </el-form-item>

            <el-form-item prop="volumn">
              <div slot="label">体积：</div>

              <el-input v-model="freightForm.volumn" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item prop="channelCapacity">
          <div slot="label">渠道能力：</div>

          <el-checkbox-group v-model="freightForm.channelAbility">
            <el-checkbox
              v-for="(item, value) in publicData.channelAbilitysMap"
              :key="value"
              :label="value"
              name="channelCapacity"
            >
              {{ item }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <!-- 特殊产品 -->
        <el-form-item prop="specialProduct">
          <div slot="label">特殊产品：</div>

          <el-checkbox-group
            v-model="freightForm.specialProduct"
            @change="changeSpecialProduct"
          >
            <el-checkbox
              v-if="publicData.specialProductsMap[53]"
              label="53"
              :disabled="disabledSpecialProduct1"
              name="specialProduct"
            >
              均不是
            </el-checkbox>
            <template v-for="(item, value) in publicData.specialProductsMap">
              <template v-if="item !== '均不是'">
                <el-checkbox
                  :key="value"
                  :label="value"
                  :disabled="disabledSpecialProduct2"
                  name="specialProduct"
                >
                  {{ item }}
                </el-checkbox>
              </template>
            </template>
          </el-checkbox-group>
        </el-form-item>

        <!-- 是否包税 -->
        <el-form-item prop="isTaxFarming">
          <div slot="label">是否包税：</div>

          <el-radio-group v-model="freightForm.isTaxFarming">
            <el-radio :label="parseInt(32)">
              是
            </el-radio>
            <el-radio :label="parseInt(38)">
              否
            </el-radio>
          </el-radio-group>
        </el-form-item>

        <!-- FBA -->
        <!-- 交货条款 -->
        <el-form-item prop="deliveryTerms">
          <div slot="label">交货条款：</div>

          <el-radio-group v-model="freightForm.deliveryTerms">
            <el-radio :label="parseInt(29)">
              DDP
            </el-radio>
            <el-radio :label="parseInt(28)">
              DDU
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </el-card>
    <div style="margin:10px 0">
      <el-button type="primary" size="mini" @click="onSubmit">
        查询
      </el-button>
      <el-button type="primary" size="mini" @click="onReset">
        重置
      </el-button>
    </div>
    <el-card
      v-if="
        airData.length > 0 || aecData.length > 0 || deliveryvData.length > 0
      "
    >
      <el-row :gutter="20" v-if="airData.length > 0">
        <span class="table_title">空运</span>
        <el-table
          class="table-box"
          :data="airData"
          style="width: 100%"
          size="mini"
        >
          <ex-table-column
            v-for="(item, index) in tableColumns"
            :key="index"
            :label="item.label"
            :prop="item.prop"
            :fit-header="true"
            :auto-fit="true"
          >
          </ex-table-column>
          <el-table-column fixed="right" label="操作说明">
            <template slot-scope="scope">
              <el-tooltip
                class="item margin-left-sm"
                effect="dark"
                content="操作说明"
                placement="top"
              >
                <i
                  class="el-icon-document"
                  style="color: red;font-size: large;"
                  @click="oprionExplain(scope.row)"
                />
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <el-tooltip
                class="item margin-left-sm"
                effect="dark"
                content="立即下单"
                placement="top"
              >
                <i
                  class="el-icon-s-order"
                  style="color: red;font-size: large;"
                  @click="createOrder(scope.row, 0)"
                />
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <el-row :gutter="20" v-if="aecData.length > 0">
        <span class="table_title">海运</span>
        <el-table
          class="table-box"
          :data="aecData"
          style="width: 100%"
          size="mini"
        >
          <ex-table-column
            v-for="(item, index) in tableColumns"
            :key="index"
            :label="item.label"
            :prop="item.prop"
            :fit-header="true"
            :auto-fit="true"
          >
          </ex-table-column>
          <el-table-column fixed="right" label="操作说明">
            <template slot-scope="scope">
              <el-tooltip
                class="item margin-left-sm"
                effect="dark"
                content="操作说明"
                placement="top"
              >
                <i
                  class="el-icon-document"
                  style="color: red;font-size: large;"
                  @click="oprionExplain(scope.row)"
                />
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <el-tooltip
                class="item margin-left-sm"
                effect="dark"
                content="立即下单"
                placement="top"
              >
                <i
                  class="el-icon-s-order"
                  style="color: red;font-size: large;"
                  @click="createOrder(scope.row, 1)"
                />
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <el-row :gutter="20" v-if="deliveryvData.length > 0">
        <span class="table_title">快递</span>
        <el-table
          class="table-box"
          :data="deliveryvData"
          style="width: 100%"
          size="mini"
        >
          <ex-table-column
            v-for="(item, index) in tableColumns"
            :key="index"
            :label="item.label"
            :prop="item.prop"
            :fit-header="true"
            :auto-fit="true"
          >
          </ex-table-column>
          <el-table-column fixed="right" label="操作说明">
            <template slot-scope="scope">
              <el-tooltip
                class="item margin-left-sm"
                effect="dark"
                content="操作说明"
                placement="top"
              >
                <i
                  class="el-icon-document"
                  style="color: red;font-size: large;"
                  @click="oprionExplain(scope.row)"
                />
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <el-tooltip
                class="item margin-left-sm"
                effect="dark"
                content="立即下单"
                placement="top"
              >
                <i
                  class="el-icon-s-order"
                  style="color: red;font-size: large;"
                  @click="createOrder(scope.row, 2)"
                />
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
    </el-card>

    <el-dialog title="确认操作" :visible.sync="dialogVisible" width="30%">
      <span>是否去FBA快捷下单页面，取消则到标准下单页面</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="sendOrder(type, 0)">取 消</el-button>
        <el-button type="primary" @click="sendOrder(type, 1)">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="渠道说明"
      :visible.sync="dialogChannelExplain"
      width="60%"
    >
      <div v-html="channelExplain"></div>
    </el-dialog>
  </section>
</template>
<script>
import { mapGetters } from 'vuex'
import { queryChannelPrices } from '@/api/waybill'
import { clone } from '@/utils/clone'
export default {
  name: 'FreighFtInquiry',
  data() {
    return {
      tableColumns: [
        { prop: 'customerChannel.name', label: '渠道名称' },
        { prop: 'provinceName', label: '国内分区' },
        { prop: 'finalWeight', label: '计费数量' },
        { prop: 'unitFreightCost', label: '运费单价（RMB）' },
        { prop: 'feightMoney', label: '	运费总额（RMB）' },
        { prop: 'customerChannel.arriveTime', label: '最近时效（工作日）' }
      ],
      aecData: [],
      airData: [],
      deliveryvData: [],
      disabledSpecialProduct1: false, // 特殊产品禁用
      disabledSpecialProduct2: false, // 特殊产品禁用
      freightForm: {
        purposeWarehouseType: '',
        channelLoadingPortId: '',
        countryId: '',
        weight: '',
        volumn: '',
        channelAbility: [],
        specialProduct: [],
        isTaxFarming: '',
        deliveryTerms: '',
        isCustomerDeclaration: ''
      },

      rules: {
        channelLoadingPortId: [
          { required: true, message: '请选择起运地', trigger: 'change' }
        ],
        countryId: [
          { required: true, message: '请选择目的国家', trigger: 'change' }
        ],

        weight: [
          { required: true, message: '请填写正整数', trigger: 'blur' },
          {
            pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,3})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
            message: '须为数字,可留3位小数'
          }
        ],
        volumn: [
          { required: false, message: '请填写正整数', trigger: 'blur' },
          {
            pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,3})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
            message: '须为数字,可留3位小数'
          }
        ],

        channelAbility: [
          { required: true, message: '请选择渠道能力', trigger: 'change' }
        ],
        specialProduct: [
          { required: true, message: '请选特殊产品', trigger: 'change' }
        ],
        purposeWarehouseType: [
          { required: true, message: '请选择是否FBA', trigger: 'change' }
        ],
        isTaxFarming: [
          { required: true, message: '请选择是否包税', trigger: 'change' }
        ],
        deliveryTerms: [
          { required: true, message: '请选择交货条款', trigger: 'change' }
        ],
        isCustomerDeclaration: [
          { required: true, message: '请选择报关方式', trigger: 'change' }
        ]
      },

      ddupOption: {},
      isTaxFarmingnOption: {},
      dialogVisible: false,
      type: 0, //类型，默认空运
      dialogChannelExplain: false,
      channelExplain: ''
    }
  },
  computed: {
    ...mapGetters(['publicData'])
  },
  created() {
    for (var key in this.publicData.otherProductsMap) {
      if (
        this.publicData.otherProductsMap[key] === 'DDP' ||
        this.publicData.otherProductsMap[key] === 'DDU'
      ) {
        this.ddupOption[key] = this.publicData.otherProductsMap[key]
      }
      if (
        this.publicData.otherProductsMap[key] === '包税' ||
        this.publicData.otherProductsMap[key] === '不包税'
      ) {
        this.isTaxFarmingnOption[key] = this.publicData.otherProductsMap[key]
      }
    }
  },
  mounted() {
    //console.log("publicData",this.publicData.otherProductsMap);
    //console.log(this.ddupOption);
  },
  methods: {
    onSubmit() {
      this.$refs['freightForm'].validate(valid => {
        if (valid) {
          this.queryList()
        } else {
          return false
        }
      })
    },
    async queryList() {
      this.$store.dispatch('app/toggleDialog', true)
      this.freightForm.type = '0'
      const form = clone(this.freightForm)
      form.other = `${form.isTaxFarming},${form.deliveryTerms}`
      form.channelAbility = form.channelAbility.toString()
      form.specialProduct = form.specialProduct.toString()

      const data = await queryChannelPrices(form)
      //console.log("data",data);
      if (data.aecData) {
        data.aecData.forEach(data => {
          data.provinceName = this.publicData.countryStateMap[data.provinceId]
        })
      }
      if (data.airData) {
        data.airData.forEach(data => {
          data.provinceName = this.publicData.countryStateMap[data.provinceId]
        })
      }
      if (data.deliveryvData) {
        data.deliveryvData.forEach(data => {
          data.provinceName = this.publicData.countryStateMap[data.provinceId]
        })
      }
      this.aecData = data.aecData ? data.aecData : []
      this.airData = data.airData ? data.airData : []
      this.deliveryvData = data.deliveryvData ? data.deliveryvData : []
      this.$store.dispatch('app/toggleDialog', false)
    },
    onReset() {
      this.freightForm = {
        purposeWarehouseType: '',
        channelLoadingPortId: '',
        countryId: '',
        weight: '',
        volumn: '',
        channelAbility: [],
        specialProduct: [],
        isTaxFarming: '',
        deliveryTerms: '',
        isCustomerDeclaration: ''
      }
      this.aecData = []
      this.airData = []
      this.deliveryvData = []
    },
    createOrder(row, type) {
      this.type = type
      this.dialogVisible = true
    },
    oprionExplain(row) {
      //console.log("channelExplain",row.customerChannel.channelExplain);
      this.dialogChannelExplain = true
      this.channelExplain = row.customerChannel.channelExplain
    },
    sendOrder(type, mode) {
      let name = ''
      let tab = ''
      if (type === 0) {
        //空运下单
        name = 'orderToAirFreight'
      } else if (type === 1) {
        //海运下单
        name = 'orderToSeaFreight'
      } else {
        //快递下单
        name = 'orderToExpressDelivery'
      }
      if (mode === 0) {
        //标准下单
        tab = 'standardOrder'
      } else {
        //快捷下单
        tab = 'quickOrder'
      }
      this.freightForm
      const form = {
        loadingPort: this.freightForm.channelLoadingPortId,
        countryId: this.freightForm.countryId,
        customerActualWeight: this.freightForm.weight,
        customerVolume: this.freightForm.volumn,
        channelCapacity: [this.freightForm.channelAbility],
        specialProduct: [this.freightForm.specialProduct],
        isTaxFarming: this.freightForm.isTaxFarming,
        deliveryTerms: this.freightForm.deliveryTerms
      }

      this.$router.push({
        path: `/waybillManagement/${name}`,
        query: { tab: tab }
      })
      sessionStorage.setItem('channelFormLeft', JSON.stringify(form))
      this.dialogVisible = false
    },
    changeSpecialProduct(e) {
      console.log('object :>> ', this.freightForm.specialProduct)
      if (e.length > 0) {
        if (e[e.length - 1] === '53') {
          this.freightForm.specialProduct = ['53']
          this.disabledSpecialProduct1 = false
          this.disabledSpecialProduct2 = true
        } else {
          const index = this.freightForm.specialProduct.indexOf('53')
          if (index > -1) {
            this.freightForm.specialProduct.splice(index, 1)
          }
          this.disabledSpecialProduct1 = true
          this.disabledSpecialProduct2 = false
        }
      } else {
        this.disabledSpecialProduct1 = false
        this.disabledSpecialProduct2 = false
      }
    }
  }
}
</script>
<style>
.table_title {
  font-size: 24px;
  margin: 20px 0 0 0;
  display: block;
}
</style>
